<template>
  <div id="app">
<!--    导航菜单-->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      :router="agRouter"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="CardInsert">
        新增名片
      </el-menu-item>
      <el-menu-item index="Home">
        名片列表
      </el-menu-item>
      <el-menu-item index="Like">
        喜欢
      </el-menu-item>
    </el-menu>
<!--    显示头像-->
    <div class="admin" >
      <el-avatar :size="50" >
<!--        显示个人信息-->
        <el-popover
                    placement="bottom"
                    title="个人信息"
                    width="200"
                    trigger="click"
                    @show="oneself">
          <p>id:{{userOneself.id}}</p>
          <p>名字:{{userOneself.name}}</p>
          <p>性别:{{userOneself.sex}}</p>
          <p>公司:{{userOneself.company}}</p>
          <p>职位:{{userOneself.position}}</p>
          <p>手机号:{{userOneself.mobile}}</p>
          <p>热度:{{userOneself.visitied}}</p>
        <el-col slot="reference">
          {{user.username}}
        </el-col>
      </el-popover>
      </el-avatar>
    </div>
    <router-view class="view"/>
  </div>


</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      user : this.$store.state.user,
      activeIndex: 'Home',
      agRouter:true,
      userOneself:{}
    };
  },
  mounted() {
    window.addEventListener('unload',this.saveState)
  },
  methods: {
    saveState(){
      sessionStorage.setItem('state',JSON.stringify(this.$store.state))
    },
    handleSelect(key, keyPath) {
      console.log(key);
    },
    oneself(){
        let vm = this;
        this.axios({
          url:`/localhost/crad/selectOneself?id=${vm.user.cradId}`,
          method:'get'
        }).then(function (res) {
          console.log(res.data.data);
          vm.userOneself = res.data.data;
        }).catch(function (err) {
          console.log(err);
        });
    },
  },
}
</script>

<style>
.el-menu-demo{

}
.admin{
  position: relative;
  top: -55px;
  margin-left: 93%;
}
.view{
  margin-top: -30px;
}
</style>
